import React from 'react';
import { inject, observer } from 'mobx-react';
import { Row, Col, Spin } from 'antd';
import {
  WeaInputSearch,
  WeaEchart,
  WeaBrowser,
  WeaRadioGroup,
  WeaLocaleProvider,
} from 'ecCom';
import { toJS } from 'mobx';

const getLabel = WeaLocaleProvider.getLabel;
@inject('docOfAuthorStore')

@observer
class DocOfAuthorContent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      option: {
        xAxis: {
          show: false,
          triggerEvent: true,
          data: this.props.xdata || [],
          axisLine: { lineStyle: { color: '#B2B2B2' } },
          splitLine: {
            show: true,
            lineStyle: { color: ['#B2B2B2'] },
            interval: (number) => {
              if (number === 0) {
 return true; 
} return false;
            },
          },
          axisTick: {
            lineStyle: { color: '#B2B2B2' },
            alignWithLabel: true,
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: '#333333',
            },
            formatter(value) {
              return value.substring(0, value.indexOf('('));
            },
          },
        },
        yAxis: {
          show: false,
          axisLine: { lineStyle: { color: '#B2B2B2' } },
          axisLabel: {
            index: 0,
            textStyle: {
              color: '#333333',
            },
          },
          splitLine: {
            show: false,
          },
        },
        grid: {
          left: 50,
          right: 0,
          borderColor: '#c5c5c5',
        },
        color: ['#00A9FF'],
        series: [
          {
            name: getLabel(31626, '文档数量'),
            type: 'bar',
            data: this.props.ydata || [],
            barWidth: '50%',
            barGap: '10',
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
      },
    };
  }
  componentDidMount() {
    const { docOfAuthorStore } = this.props;
    const { getReportPeopleData, getCreateDocNum
      , getMostDocCategory, getReportData } = docOfAuthorStore;
    getReportPeopleData(this.props.query);
    getCreateDocNum(this.props.query);
    // getMostDocCategory(this.props.query);
    getReportData(this.props.query);
  }
  componentWillReceiveProps(nextProps) {
    let { option } = this.state;
    const { docOfAuthorStore } = this.props;
    if (this.props.xdata !== nextProps.xdata) {
      option.xAxis.data = nextProps.xdata;
    }
    if (this.props.ydata !== nextProps.ydata) {
      option.series[0].data = nextProps.ydata;
    }
    if (this.props.xdata !== nextProps.xdata || this.props.ydata !== nextProps.ydata) {
        if (nextProps.xdata.length !== 0) {
          option.xAxis.show = true;
        } else {
          option.xAxis.show = false;
        }
        if (nextProps.ydata.length !== 0) {
          option.yAxis.show = true;
        } else {
          option.yAxis.show = false;
        }
      this.setState({ option });
      this.chart && this.chart.paint();
    }
  }
  shouleComponentUpdate() {
    return true;
  }
  componentWillUnmount() {
  }
  getDatas = (conditions) => {
    // 修改浏览框的replaceData，以保存上一次查询条件
    const { docOfAuthorStore } = this.props;
    const { getReportPeopleData, getCreateDocNum
      , getMostDocCategory, getReportData } = docOfAuthorStore;
    getReportPeopleData(conditions);
    getCreateDocNum(conditions);
    getMostDocCategory(conditions);
    getReportData(conditions);
    this.setState({ condition: conditions });
  }
  chartAction = (chart) => {
    chart.off('click');
    chart.on('click', (params) => {
      if (params.componentType === 'xAxis') {
        const id = params.value.substring(params.value.lastIndexOf(' ') + 1, params.value.indexOf(')'));
        window.open(`/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${id}`);
      }
    });
  }
  render() {
    let { docOfAuthorStore, xdata, ydata } = this.props;
    const { reportPeopleData, createDocNum
      , mostDocCategory, reportTitle
      , loadingChart, loadingRPD
      , loadingCDM, loadingMDC } = docOfAuthorStore;
    const { option } = this.state;
    const dateCom = (() => {
      let date = new Date();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) {
        month = `0${month}`;
      }
      if (day < 10) {
        day = `0${day}`;
      }
      return `${date.getFullYear()}-${month}-${day}`;
    })();
    const tipCom = (() => {
      if (xdata.length === 0 || ydata.length === 0) {
        return (
            <div className="count-charts-img">
              <img src={'/spa/document/images/noreport.png'} />
              <div className="count-charts-text">{getLabel(384202, ' 暂无报表')}</div>
            </div>
        );
      }
    })();
    const reportPeopleDatas = toJS(reportPeopleData);
    const createDocNums = toJS(createDocNum);
    const mostDocCategoryData = toJS(mostDocCategory);
    return (
      <div className="count">
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@u2xkl3`} spinning={loadingRPD || loadingCDM || loadingMDC || loadingChart}>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@jqvwpu`} className="count-container">
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hio7oq`} lg={6} md={6} sm={5} xs={5} className="count-col">
              <span className="icon-coms-hrm count-icon-hrm" />
              {
              	reportPeopleDatas.length !== 0 && createDocNums.length !== 0
              		&& mostDocCategoryData.length !== 0 && (
              			<ul>
			                <li>{reportPeopleDatas.show}</li>
			                <li>{reportPeopleDatas.data && reportPeopleDatas.data[0].num}</li>
			              </ul>
              		)
              }
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cfqzlp`} lg={6} md={6} sm={5} xs={5} className="count-col">
              <span className="icon-coms-doc count-icon-doc" />
              {
              	reportPeopleDatas.length !== 0 && createDocNums.length !== 0
              		&& mostDocCategoryData.length !== 0 && (
              			<ul>
			                <li>{createDocNums.show}</li>
			                <li>{createDocNums.data && createDocNums.data[0].docNum}</li>
			              </ul>
              		)
              }
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@kqzg7g`} lg={12} md={12} sm={14} xs={14} className="count-col">
              <span className="icon-coms-Catalog count-icon-Catalog" />
              {
              	reportPeopleDatas.length !== 0 && createDocNums.length !== 0
              		&& mostDocCategoryData.length !== 0 && (
              			<ul>
			                <li>{mostDocCategoryData.show}</li>
			                <li title={mostDocCategoryData.data && mostDocCategoryData.data[0].num}>{mostDocCategoryData.data && mostDocCategoryData.data[0].num}</li>
			              </ul>
              		)
              }
            </Col>
          </Row>
          <div className="count-container">
            {
              xdata.length !== 0 && ydata.length !== 0 && (
                <div className="count-charts-title">
                  {reportTitle}
                </div>
              )
            }
            {!loadingChart && tipCom}
            <div className="count-charts">
              <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@3z00uq`} ref={(e) => {
 this.chart = e; 
}} chartName={''} option={option} useDefault chartAction={this.chartAction} />
            </div>
          </div>
        </Spin>
        <div className="count-bottom">{getLabel(382151, '本报表数据统计截止到：')}{dateCom} </div>
      </div>
    );
  }
}
export default DocOfAuthorContent;

